<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册页面</title>
    <link rel="stylesheet" href="styles.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        .modal {
            display: none; /* 隐藏模态框 */
            position: fixed;
            z-index: 1;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0, 0, 0, 0.4);
        }

        .modal-content {
            background-color: #fefefe;
            margin: 15% auto;
            padding: 20px;
            border: 1px solid #888;
            width: 80%;
            max-width: 300px;
            border-radius: 10px;
            text-align: center;
        }

        .close-button {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
            cursor: pointer;
        }

        .close-button:hover,
        .close-button:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>欢迎注册</h1>
        <form id="registrationForm">
            <div class="form-group">
                <label for="username">登录名:</label>
                <input type="text" id="username" required placeholder="请输入登录名">
            </div>
            <div class="form-group">
                <label for="password">密码:</label>
                <input type="password" id="password" required placeholder="请输入密码">
            </div>
            <div class="form-group">
                <label for="confirmPassword">重复密码:</label>
                <input type="password" id="confirmPassword" required placeholder="请再次输入密码">
            </div>
            <div class="form-group">
                <label for="email">邮箱地址:</label>
                <input type="email" id="email" required placeholder="请输入邮箱地址">
            </div>
            <div class="form-group">
                <label for="phone">手机号码:</label>
                <input type="tel" id="phone" required placeholder="请输入手机号码">
            </div>
            <div class="form-group">
                <label for="address">家庭住址:</label>
                <select id="province" required>
                    <option value="">请选择省</option>
                </select>
                <select id="city" required>
                    <option value="">请选择市</option>
                </select>
                <select id="district" required>
                    <option value="">请选择区</option>
                </select>
            </div>
            <button type="submit">注册</button>
        </form>
    </div>

    <!-- 注册成功模态框 -->
    <div id="successModal" class="modal">
        <div class="modal-content">
            <span class="close-button">&times;</span>
            <p>注册成功！</p>
        </div>
    </div>

    <script>
        const addressData = {
            "北京市": {
                "北京市": ["东城区", "西城区", "朝阳区", "海淀区"],
            },
            "广东省": {
                "广州市": ["天河区", "越秀区", "海珠区", "白云区"],
                "深圳市": ["福田区", "南山区", "罗湖区", "宝安区"],
            },
            "江苏省": {
                "南京市": ["玄武区", "秦淮区", "建邺区", "鼓楼区"],
                "苏州市": ["姑苏区", "吴中区", "相城区", "工业园区"],
            }

        };

        $(document).ready(function() {
            const provinceSelect = $('#province');
            const citySelect = $('#city');
            const districtSelect = $('#district');

            for (let province in addressData) {
                provinceSelect.append(`<option value="${province}">${province}</option>`);
            }

            provinceSelect.change(function() {
                const selectedProvince = $(this).val();
                citySelect.empty().append('<option value="">请选择市</option>');
                districtSelect.empty().append('<option value="">请选择区</option>');

                if (selectedProvince) {
                    const cities = addressData[selectedProvince];
                    for (let city in cities) {
                        citySelect.append(`<option value="${city}">${city}</option>`);
                    }
                }
            });

            citySelect.change(function() {
                const selectedProvince = provinceSelect.val();
                const selectedCity = $(this).val();
                districtSelect.empty().append('<option value="">请选择区</option>');

                if (selectedCity) {
                    const districts = addressData[selectedProvince][selectedCity];
                    districts.forEach(district => {
                        districtSelect.append(`<option value="${district}">${district}</option>`);
                    });
                }
            });

            $('#registrationForm').submit(function(event) {
                event.preventDefault(); // 阻止表单的默认提交行为
                $('#successModal').show(); // 显示模态框
            });

            $('.close-button').click(function() {
                $('#successModal').hide(); // 隐藏模态框
            });

            $(window).click(function(event) {
                if ($(event.target).is('#successModal')) {
                    $('#successModal').hide(); // 点击模态框外部时关闭模态框
                }
            });
        });
    </script>
</body>
</html>
